<template>
  <div class="nav-bar">
    <div 
      v-for="item in navItems" 
      :key="item.name"
      class="nav-item"
      :class="{ active: isActive(item.name) }"
      @click="handleNavClick(item)"
    >
      <div class="nav-icon">
        <el-icon :size="24">
          <component :is="item.icon" />
        </el-icon>
      </div>
      <span class="nav-text">{{ item.text }}</span>
    </div>
    
    <!-- 发布按钮 -->
    <div class="nav-item publish-btn" @click="goToUpload">
      <div class="publish-icon">
        <div class="icon-inner">
          <el-icon :size="18">
            <Plus />
          </el-icon>
        </div>
        <div class="icon-bg"></div>
      </div>
      <span class="nav-text">发布</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import {
  House,
  User,
  Plus
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 导航项配置
const navItems = computed(() => [
  {
    name: 'Home',
    text: '首页',
    icon: 'House',
    path: '/'
  },
  {
    name: 'Profile',
    text: '我',
    icon: 'User',
    path: '/profile',
    requiresAuth: true
  }
])

// 判断是否为当前活跃路由
const isActive = (name) => {
  return route.name === name
}

// 处理导航点击
const handleNavClick = (item) => {
  // 检查是否需要登录
  if (item.requiresAuth && !userStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  
  // 如果不是当前页面才跳转
  if (!isActive(item.name)) {
    router.push(item.path)
  }
}

// 跳转到发布页面
const goToUpload = () => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  
  router.push('/upload')
}
</script>

<style lang="scss" scoped>
.nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px;
  z-index: 100;
  
  // 安全区域适配
  padding-bottom: env(safe-area-inset-bottom);
  min-height: calc(70px + env(safe-area-inset-bottom));
  
  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: $transition-fast;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    
    .nav-icon {
      position: relative;
      transition: $transition-fast;
    }
    
    &:hover {
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.05);
      transform: translateY(-2px);
      
      .nav-icon {
        transform: scale(1.1);
      }
    }
    
    &.active {
      color: $text-white;
      
      .nav-text {
        font-weight: 600;
        color: $text-white;
      }
      
      .nav-icon {
        transform: scale(1.1);
      }
      
      // 活跃状态指示器
      &::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: $primary-color;
        border-radius: 50%;
        box-shadow: 0 0 8px $primary-color;
      }
    }
    
    .nav-text {
      font-size: 11px;
      line-height: 1;
      font-weight: 500;
      transition: $transition-fast;
    }
    
    &.publish-btn {
      position: relative;
      margin: 0 8px;
      
      .publish-icon {
        position: relative;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2px;
        
        .icon-inner {
          position: relative;
          z-index: 2;
          color: $text-white;
          transition: $transition-fast;
        }
        
        .icon-bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, $primary-color 0%, #ff6b9d 50%, $primary-hover 100%);
          border-radius: 12px;
          transition: $transition-fast;
          box-shadow: 0 4px 15px rgba(254, 44, 85, 0.3);
          
          &::before {
            content: '';
            position: absolute;
            top: 1px;
            left: 1px;
            right: 1px;
            bottom: 1px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
            border-radius: 11px;
            pointer-events: none;
          }
        }
      }
      
      .nav-text {
        color: $text-white;
        font-weight: 600;
        font-size: 12px;
      }
      
      &:hover {
        transform: translateY(-3px);
        
        .icon-bg {
          transform: scale(1.05);
          box-shadow: 0 6px 25px rgba(254, 44, 85, 0.4);
        }
        
        .icon-inner {
          transform: scale(1.1);
        }
      }
      
      &:active {
        transform: translateY(-1px);
        
        .icon-bg {
          transform: scale(0.98);
        }
      }
    }
  }
}

// 适配不同屏幕尺寸
@media (max-width: 768px) {
  .nav-bar {
    height: 65px;
    padding: 0 16px;
    min-height: calc(65px + env(safe-area-inset-bottom));
    
    .nav-item {
      padding: 6px 12px;
      gap: 3px;
      
      .nav-text {
        font-size: 10px;
      }
      
      &.publish-btn {
        margin: 0 6px;
        
        .publish-icon {
          width: 40px;
          height: 40px;
          
          .icon-bg {
            border-radius: 10px;
            
            &::before {
              border-radius: 9px;
            }
          }
        }
        
        .nav-text {
          font-size: 11px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .nav-bar {
    height: 60px;
    padding: 0 12px;
    min-height: calc(60px + env(safe-area-inset-bottom));
    
    .nav-item {
      padding: 4px 8px;
      
      .nav-icon .el-icon {
        font-size: 22px;
      }
      
      .nav-text {
        font-size: 9px;
      }
      
      &.publish-btn {
        margin: 0 4px;
        
        .publish-icon {
          width: 36px;
          height: 36px;
          
          .icon-inner .el-icon {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style> 